<form action="options.php" method="post">
	<?php wp_nonce_field('update-options'); ?>
	
	<!-- begin slider table -->
	<table cellspacing="0" class="widefat" style="margin-bottom:0;">
		<thead>
			<tr>
				<th>
				<div style="display:table; float:left;">
						<div style="float:left;">
							<input type="image" name="settings" value=" " style="background:none; background:url(<?php echo bloginfo('template_url'); ?>/images/admin/save.png); border:0; cursor:pointer; width:32px; height:31px; display:table;"/>
						</div>
						<div class="savecss">
							<input type="hidden" name="action" value="update" />
							<input type="hidden" name="page_options" value="nivo_slider_desc_color, nivo_slider_title_color, nivo_slider_circles, nivo_slider_effect, nivo_slider_borderon, nivo_slider_arrows, nivo_slider_height, nivo_slider_width, nivo_slider_border, nivo_slider_border_color, nivo_slider_speed, nivo_slider_auto_play, nivo_slider_description_size, nivo_slider_title_size" />
							<input type="submit" name="publish" id="publish" accesskey="p" tabindex="5" value="SAVE"/>
						</div>
					</div>
					
					<div style="display:table; float:right; margin-right:10px; margin-top:5px;">
						<a class="set_remove" href=""><img src="<?php echo bloginfo('template_url'); ?>/images/admin/remove.png" alt="" /></a>
					</div>
				
				</th>
			</tr>
		</thead>

		<tbody>
			
			<tr class='pad alternate'>
				<td>
					<h2>General Slider settings</h2>
				</td>
			</tr>
			<tr class='pad'>
				<td>
					<div class="short_title_div">Title Font Size</div> 
					<div>
						<input type="text" name="nivo_slider_title_size" tabindex="1" size="5" value="<?php echo get_option('nivo_slider_title_size', '24'); ?>" /><span class="tablespan">px</span>
					</div>
					<div class="short_title_div">Title Font color</div>
					<div>	
						<script type="text/javascript" charset="utf-8"> jQuery(function($) { $("#picker2").attachColorPicker(); });</script>
						<input type="text" name="nivo_slider_title_color" id="picker2" size="10" maxlength="7" value="<?php echo get_option('nivo_slider_title_color', '#555555'); ?>"> 
					</div>
				</td>
			</tr>
			
			<tr class='pad'>
				<td>
					<div class="short_title_div">Description Font Size</div>
					<div>
						<input type="text" name="nivo_slider_description_size" tabindex="1" size="5" value="<?php echo get_option('nivo_slider_description_size', '12'); ?>" /><span class="tablespan">px</span>
					</div>
					<div class="short_title_div">Description Font Color</div>
					<div>
					<script type="text/javascript" charset="utf-8"> jQuery(function($) { $("#picker3").attachColorPicker(); });</script>
					<input type="text" name="nivo_slider_desc_color" id="picker3" size="10" maxlength="7" value="<?php echo get_option('nivo_slider_desc_color', '#ffffff'); ?>"> 
					</div>
				</td>
			</tr>
			
						
			<tr class='pad'>
				<td>
					<div class="short_title_div">
					Arrow ( on/off ) 
					</div>
					
					<div>
					<select style="width: 70px;" name="nivo_slider_arrows" class="nivo_slider_arrows">
						<?php if(get_option('nivo_slider_arrows', 'on') == "on"){ ?>
							<option>on</option>
							<option>off</option>
						<?php } else { ?>
							<option>off</option>
							<option>on</option>
						<?php } ?>
					</select>
					</div>
					
				</td>
			</tr>
			
			
			<tr class='pad '>
				<td>
				
					<div class="short_title_div">
						Circles ( on/off )
					</div>
					
					<div>
					<select style="width: 70px;" name="nivo_slider_circles" class="nivo_slider_circles">
						<?php if(get_option('nivo_slider_circles', 'on') == "on"){ ?>
							<option>on</option>
							<option>off</option>
						<?php } else { ?>
							<option>off</option>
							<option>on</option>
						<?php } ?>
					</select>
					</div>
					
				</td>
			</tr>
						
			<tr class='pad'>
				<td>
					<div style="padding-right:20px;">
						<div class="short_title_div">
							Auto play ( on/off ) 
						</div>
						<div>
							<select style="width: 70px;" name="nivo_slider_auto_play" class="nivo_slider_auto_play">
								<?php if(get_option('nivo_slider_auto_play', 'on') == "on"){ ?>
									<option>on</option>
									<option>off</option>
								<?php } else { ?>
									<option>off</option>
									<option>on</option>
								<?php } ?>
							</select>
						</div>
					</div>
				
					<div id="nivo_slider_speed" style="margin-right:20px;	<?php if(get_option('nivo_slider_auto_play', 'on') == "off"){ echo "display:none;"; }?>">
						<div class="short_title_div">Auto Play Delay</div>
						<div>
						<input type="text" name="nivo_slider_speed" class="" tabindex="1" size="5" value="<?php echo get_option('nivo_slider_speed', '5'); ?>"/><span class="tablespan">second</span>
						</div>
					</div>
				</td>
			</tr>
			
			
			<tr class='pad'>
				<td>
				
					<div class="short_title_div">
					Slider Effect
					</div>
					
					<div>
					<?php

							echo "<select name='nivo_slider_effect'>";
							$items = array('random', 'fade', 'fold', 'sliceDown' , 'sliceUp');
							foreach ($items as $item)
							{
								$selected = (get_option('nivo_slider_effect', 'random') == $item) ? "selected=\"selected\"" : "";
								echo "<option $selected value='". $item ."'>". $item ."</option>";
							}
							echo "</select>";
					
					?>
					</div>
					
				</td>
			</tr>

			<tr class='pad alternate'>
				<td>
					<h2>Slider border settings</h2>
				</td>
			</tr>
			
			
			<tr class='pad'>
				<td>
					<div class="short_title_div">
					Slider Border ( on/off ) 
					
					</div>
					
					<div>					
					<select style="width: 70px;" name="nivo_slider_borderon" class="nivo_slider_borderon">
						<?php if(get_option('nivo_slider_borderon', 'on') == "on"){ ?>
							<option>on</option>
							<option>off</option>
						<?php } else { ?>
							<option>off</option>
							<option>on</option>
						<?php } ?>
					</select>
					</div>

				</td>
			</tr>

			
			<tr class='pad noborderon' style="<?php if(get_option('nivo_slider_borderon', 'on') == "off"){ echo "display:none;"; }?>">
				<td>
					<div id="skin_border_2" style="width:125px; text-align:center; display:table; margin-right:25px; color:#fff; float:left; padding:3px; background-color:<?php echo get_option('nivo_slider_border_color', '#ffffff'); ?>;  border:1px solid #ccc">
						<div  style="text-align:center; width:100%; font-size:9px; display:table; color:#fff; background-color:#1e1e1e;">
							Image Border Color
						</div>						
					</div>
					<script type="text/javascript" charset="utf-8"> jQuery(function($) { $("#picker1").attachColorPicker(); });</script>
					<input type="text" name="nivo_slider_border_color" id="picker1" size="10" maxlength="7" value="<?php echo get_option('nivo_slider_border_color', '#ffffff'); ?>"> 

				</td>
			</tr>
				
			<tr class='pad noborderon2' style="<?php if(get_option('nivo_slider_borderon', 'on') == "off"){ echo "display:none;"; }?>">
				<td>
					<div id="skin_border" style="width:125px; text-align:center; display:table; margin-right:25px; color:#fff; float:left; padding:3px; background-color:<?php echo get_option('nivo_slider_border_color', '#ffffff'); ?>;  border:1px solid #ccc">
						<div  style="text-align:center; width:100%;  font-size:9px; display:table; color:#fff; background-color:#1e1e1e;">
							Image Border Size
						</div>						
					</div>
					<input type="text" name="nivo_slider_border" tabindex="1" size="5" value="<?php echo get_option('nivo_slider_border', '10'); ?>" /><span class="tablespan">px</span>
				</td>
			</tr>

			<tr class='pad alternate'>
				<td>
					<h2>Slider skins width & height settings</h2>
				</td>
			</tr>
			
			<tr class='pad'>
				<td>
					<div class="short_title_div">
						<img src="<?php bloginfo('template_url'); ?>/images/admin/skin_width.png" alt=""/>
					</div>
					<div>
					<input type="text" name="nivo_slider_width" tabindex="1" size="10" value="<?php echo get_option('nivo_slider_width', '940'); ?>" /><span class="tablespan">px</span>
					</div>
				</td>
			</tr>		
				
				
			<tr class='pad'>
				<td>
					<div class="short_title_div">
					<img src="<?php bloginfo('template_url'); ?>/images/admin/skin_height.png" alt=""/>
					</div>
					<div>
					<input type="text" name="nivo_slider_height" tabindex="1" size="10" value="<?php echo get_option('nivo_slider_height', '300'); ?>" /><span class="tablespan">px</span>
					</div>
				</td>
			</tr>			
							
		
		</tbody>
			
		<!-- begin add item button -->
		<tfoot>
			<tr>
				<th>
					<div style="display:table; float:left;">
						<div style="float:left;">
							<input type="image" name="settings" value=" " style="background:none; background:url(<?php echo bloginfo('template_url'); ?>/images/admin/save.png); border:0; cursor:pointer; width:32px; height:31px; display:table;"/>
						</div>
						<div class="savecss">
							<input type="hidden" name="action" value="update" />
							<input type="hidden" name="page_options" value="nivo_slider_desc_color, nivo_slider_title_color, nivo_slider_circles, nivo_slider_effect, nivo_slider_borderon, nivo_slider_arrows, nivo_slider_height, nivo_slider_width, nivo_slider_border, nivo_slider_border_color, nivo_slider_speed, nivo_slider_auto_play, nivo_slider_description_size, nivo_slider_title_size" />
							<input type="submit" name="publish" id="publish" accesskey="p" tabindex="5" value="SAVE"/>
						</div>
					</div>
				</th>
			</tr>
		</tfoot>
		<!-- end add item button -->

	</table>
	<!-- end slider table -->

</form>